<template>
  <transition name="slide" appear>
    <div v-if="messageIsShow"
         :class="[`message-${type}`, {'center':center}]"
         class="message-container">
      <i :class="['iconfont', `icon-${type}`]"></i>
      <span v-if="dangerouslyUserHTMLString" v-html="message"></span>
      <span v-else v-text="message"></span>
      <span @click="closeMySelf" v-show="closeIconIsShow">X</span>
    </div>
  </transition>
</template>

<script>
import '../public/style/iconfont.css';

export default {
  name: 'message',
  data() {
    return {
      messageIsShow: true || 1000,
      timer: null,
      closeIconIsShow: false,
      center: false,
    };
  },
  methods: {
    closeMySelf() {
      this.messageIsShow = false;
    },
  },
  created() {
    this.closeIconIsShow = !this.duration;
  },
  mounted() {
    if (this.duration) {
      this.timer = setTimeout(() => {
        this.messageIsShow = false;
      }, this.duration);
    }
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
};
</script>

<style scoped lang="scss">
  @function co($c) {
    @return $c/.7
  }
  $type: (
    error:(color: #ffb08f),
    success:(color: #8ce6b0),
    warning:(color: #ffd77a),
    info:(color: #abdcff),
  );
  @each $i in map_keys($type) {
    .message-#{$i}, .icon-#{$i}{
      color: map_get(map_get($type, $i), color);
      background-color: co(map_get(map_get($type, $i), color));
    }
  }
  .message-container{
    user-select: none;
    width: 280px;
    line-height: 40px;
    font-size: 12px;
    border-radius: 4px;
    transform: translate(0, 40px);
    position: absolute;
    z-index: 999;
    left: 0;
    right: 0;
    top: 40px;
    margin: auto;
    span,i{
      vertical-align: middle;
    }
  }
  .slide-enter, .slide-leave-to {
    transform: translate(0, -40px);
  }
  .slide-enter-active, .slide-leave-active {
    transition: all .3s ease-in-out;
  }
  .slide-enter-to, .slide-leave {
    transform: translate(0, 40px);
  }
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>
